<template>
  <div class="sort" v-show="isShow">
    <div class="all-sort-list2">
      <div class="item" v-for="(t1, index) in proxy.$store.state.authState.menu_list" :key="t1.id">
        <div class="h3_span">
          <h3>
            {{ t1.name }}
          </h3>
          <el-icon size="15px">
            <CaretRight />
          </el-icon>
        </div>
        <div class="item-list clearfix">
          <div class="subitem">
            <dl class="fore" v-for="(t2, index) in t1.child" :key="t2.id">
              <dt>
                <span style="font-size: 15px; ">{{ t2.name }}</span>
              </dt>
              <dd>
                <em v-for="(t3, index) in t2.child" :key="t3.id">
                  <router-link :to="{ path: '/search', query: { type: 'job', wd: t3.name } } " @click="btn_upSearch('job',t3.name)">
                    {{ t3.name }}
                  </router-link>
                </em>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { menu_list } from "@/utills/data";
import { getHomeMenu } from "@/api/authApi"
import { ref, onMounted, reactive, onBeforeMount, getCurrentInstance } from "vue";
import { useStore } from "vuex"
export default {
  name: "Classification",
  components: {

  },

  setup() {
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
    const store = useStore()
    const isShow=ref(false)
    const list=store.state.authState.menu_list
    const btn_upSearch=(type:string,wd:string)=>{
      store.commit("upSearch", { searchType: type, searchWd: wd })
    }
    const init = ()=>{
      getHomeMenu().then((res: any) => {
        store.state.authState.menu_list = reactive(res.data.menu_list)
        isShow.value=true
      })
    }
    onBeforeMount(() => {
      if (list[0].id!=""){
        isShow.value=true
      }else{
        init()
      }
     
    })

    return {
      menu_list,
      proxy,
      isShow,
      btn_upSearch
    };
  },
};
</script>

<style scoped lang="css" >
.h3_span {
  color: #606266;
  padding-right: 14px;
  /* padding: 6px 0;  */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f7f7f7;
}

.h3_span:hover {
  transition: border linear .2s;
  box-shadow: 0 0 2px rgba(213, 208, 213, 3);
  color: #409EFF;
}



a {

  font-size: 15px;
  text-decoration: none;
  padding-bottom: 2px;
  color: black;

}

a:hover {
  text-decoration: underline;
  color: #409EFF;
}


.sort {
  /* left: 0;
  top: 45px; */
  width: 100%;
  height: 100%;
  position: absolute;
  /* background: #fafafa; */
  z-index: 999;
}

.sort .all-sort-list2 .item h3 {
  line-height: 27px;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  padding: 6px 10px;
  margin: 0;
}

.sort .all-sort-list2 .item h3 a {
  color: #333;
}

.sort .all-sort-list2 .item .item-list {
  display: none;
  position: absolute;
  width: 910px;
  min-height: 400px;
  /* background: #f7f7f7; */
  background: #fff;
  left: 250.5px;
  /* border: 1px solid #ddd; */
  top: 0;
  z-index: 9999 !important;
}

.sort .all-sort-list2 .item .item-list .subitem {
  float: left;
  width: 900px;
  padding: 0 4px 0 8px;
}

.sort .all-sort-list2 .item .item-list .subitem dl {
  border-top: 1px solid #eee;
  padding: 6px 0;
  overflow: hidden;
  zoom: 1;
}

.sort .all-sort-list2 .item .item-list .subitem dl.fore {
  border-top: 0;
}

.sort .all-sort-list2 .item .item-list .subitem dl dt {
  float: left;
  width: 120px;
  line-height: 22px;
  text-align: right;
  padding: 3px 6px 0 0;
  font-weight: 700;
}

.sort .all-sort-list2 .item .item-list .subitem dl dd {
  float: left;
  width: 760px;
  padding: 3px 0 0;
  overflow: hidden;
}

.sort .all-sort-list2 .item .item-list .subitem dl dd em {
  float: left;
  height: 14px;
  line-height: 14px;
  padding: 0 8px;
  margin-top: 5px;
  border-left: 1px solid #ccc;
}

.sort .all-sort-list2 .item:hover .item-list {
  display: block;
}
</style>
